<template>
    <el-config-provider :locale="locale">
        <el-date-picker 
            class="flex-datepicker" 
            :type="data.type || 'date'" 
            :placeholder="data.placeholder || ''" 
            :clearable="data.clearable"
            :modelValue="curDate"
            @panel-change="handlePanelChange"
        >
        </el-date-picker>
    </el-config-provider>
</template>
<script setup>
    import { watch, ref, computed } from 'vue';
    import locale from 'element-plus/es/locale/lang/zh-cn';
    // :modelValue="curDate"

    const props = defineProps({
        form:{ type:Object },
        data:{ type:Object }, 
    });
    const curDate = ref(new Date());
    watch(()=>props.form.date, ()=>{    
        curDate.value = props.form.date;   
    })
    function handlePanelChange(val){
        if ( props.data.validator ){
            let res = props.data.validator(val);
            if ( !res ) {
                // 前月没有变动时,直接更新日历控件
                curDate.value = val;
                props.form[props.data.paramKey] = val;
            } else {
                // 前月有变动，不操作，操作交给模态窗
            }
        } else {
            curDate.value = val;
            props.form[props.data.paramKey] = val;
        }
    }
    
</script>
<style lang="scss">
    .flex-datepicker.el-date-editor {
        width:12vw;
        height:var(--baseHeight);
        font-size:var(--baseFontSize);
        line-height:var(--baseHeight);
        .el-input__wrapper {
            padding:0 var(--sPadding);
            input {
                font-size:var(--baseFontSize);
                height:var(--baseHeight);
                line-height:var(--baseHeight);
            }
        }
    }
    .flex-input.el-textarea {
        height:calc( 2 * var(--baseHeight));
        line-height:calc( 2 * var(--baseHeight));
    }
</style>

